<template lang="">
    <div>
       <input v-model = "leftNum" type="number"/> 
       <select v-model="rule">
        <option v-for="(item,index) in arr":value="item.value" :key="index"> {{item.label}}</option>
        </select>
        <input v-model="right" type="number"/>
        <button @click ="setResulNum">=</button>
        {{resultNum}}
    </div>
</template>
<script>
export default {
    data(){
        return{
            leftNum:1,
            right:1,
            resultNum:null,
            rule:'+',
            arr:[
                {
                    label:'加法',
                    value:'+'
                },
                 {
                    label:'减法',
                    value:'-'
                },
                 {
                    label:'乘法',
                    value:'*'
                },
                               {
                    label:'幂运算',
                    value:'**'
                }
            
             


            ]

        }




    },
    methods:{
        setResultNum(){
            if (!this.leftNum||!this.right) return alert('非法')
            if(this.rule==='+')this.resultNum=Number(this.leftNum)+Number(this.right)
            if(this.rule==='+')this.resultNum=Number(this.leftNum)-Number(this.right)
            if(this.rule==='+')this.resultNum=Number(this.leftNum)*Number(this.right)
            if(this.rule==='+')this.resultNum=Number(this.leftNum)/Number(this.right)
            if(this.rule==='+')this.resultNum=Number(this.leftNum)**Number(this.right)



        }




    }
    
}
</script>
<style lang="">
    
</style>